<template>
  <div>
      <el-row>
        <el-radio-group v-model="selectedType">
          <el-button v-for="(item,index) in types" :key="index" :type="item.actvie ? 'primary' : ''" @click="changeType(item,index)">{{item.label}}</el-button>
        </el-radio-group>
      </el-row>
      <div class="content_border">
        <BusinessInfo v-if="selectedType == 1" :value="dialogData"/>
        <CarInfo v-if="selectedType == 2" :value="dialogData"/>
        <FollowInfo v-if="selectedType == 3" :value="dialogData"/>
      </div>    
  </div>
</template>

<script>
  import CarInfo from './car-info';
  import BusinessInfo from './business-info';
  import FollowInfo from './follow-info';

  export default {
    name: 'detailsDataForm',
    components: {CarInfo, BusinessInfo, FollowInfo },
    props: {
      value: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        dialogData: this.value,
        types: [
          {label: '商机信息', value: 1, actvie: true},
          {label: '车辆信息', value: 2, actvie: false},
          {label: '跟进信息', value: 3, actvie: false},
        ],
        selectedType: 1,
        selectedTypeText: '商机信息',
        // disabledType: false,
        customerInfo: {},
      }
    },
    async created() {
      // const { data } = await getCustomerById(id)
      // this.customerInfo = data
    },
    methods: {
      changeType(item, index){
        this.selectedType = index + 1;
        console.log(this.selectedType);
        this.selectedTypeText = item.label;
        this.types.map((e,i) => {
          if (i == index) {
            e.actvie = true;
          } else {
            e.actvie = false;
          }
        })
      },
      // canle(){
      //   this.$store.dispatch('delVisitedViews', this.$route)
      //   this.$router.push({ path: '/customer/customer' })
      // }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .content_border {
    border: 1px solid #DCDFE6;
    padding: 15px;
    margin-top: 20px;
  }
</style>
